<template>
	<view>
		<view class="type1" @click="funConnectBluetooth">我的智能</view>
		
		<view>
			<view class="style13">{{getTempData}}</view>
			<view class="style14">温度(℃)</view>
			<view class="style15">{{getHumData}}</view>
			<view class="style16">湿度(%)</view>
		</view>
		
		<view>
			<view class="style13">{{getTempCo2}}</view>
			<view class="style14">Co2(ppm)</view>
			<view class="style15">{{getHumLight}}</view>
			<view class="style16">光照(Lum)</view>
		</view>
		
		<view class="type4" @click="updateNotify">室内光</view>
		<view class="type3" @click="gotoZhexian"> 
			<view class="type5">
				<view class="type6">H</view>
				<view class="type7">目标照度 {{setLightData}} Lum</view>
				<view class="type8">设置室内照度工作范围</view>
				<view class="type11">
					<switch @change="switch1Change"></switch>
				</view>
			</view>
		</view>
		<view class="type12">
			<slider value="200" @change="sliderChange1"  min="100" max="999" show-value />
		</view>
		
		<view class="type4" @click="updateNotify">定时开关</view>
		<view class="type3" @click="gotoZhexian"> 
			<view class="type5">
				<view class="type6">C</view>
				<view class="type7">设置{{setMotorData}}秒</view>
				<view class="type8">目标秒时间后打开/关闭</view>
				<view class="type11">
					<switch @change="switch2Change"></switch>
				</view>
			</view>
		</view>
		<view class="type12">
			<slider value="30" @change="sliderChange2"  min="10" max="50" show-value />
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,  // 定时器
				setLightData : 200,
				setMotorData:30,
				getTempData:0,
				getHumData:0,
				getHotState:0,
				getColdState:0,
				getTempCo2:0,
				getHumLight:0
 			}
		},
		
		onLoad() {
			let that = this

			// 定时器周期执行
			this.timer = setInterval(function() {
				that.refreshData();
			}, 100)
		},
		
		methods: {
			sliderChange1(e) {
				let that = this
				console.log(e.detail.value)
				this.setLightData = e.detail.value
				if (this.getHotState == 1) {
					that.funSandBleMessage(1);
				}
			},
			
			sliderChange2(e) {
				let that = this
				console.log(e.detail.value)
				this.setMotorData = e.detail.value
				if (this.getColdState == 1) {
					that.funSandBleMessage(3);
				}
			},
			
			refreshData() {
				let that = this
				that.getTempData = getApp().globalData.dataTemp;
				that.getHumData = getApp().globalData.dataHum;
				that.getTempCo2 = getApp().globalData.dataCo2;
				that.getHumLight = getApp().globalData.dataLight;
			},
			
			switch1Change (e) {
				let that = this;
				console.log(e.detail.value)
				this.getHotState = e.detail.value;
				that.sandLightWork(e.detail.value, this.setLightData);
			},
			
			switch2Change (e) {
				let that = this;
				console.log(e.detail.value)
				this.getColdState = e.detail.value;
				that.sandMotorWork(e.detail.value, this.setMotorData);
			},
			
			sandLightWork(key, data) {
				var switchKey = 0;
				if (key) {
					switchKey = 1;
				} else {
					switchKey = 0;
				}
				console.log("发送post")

				uni.request({
					url: 'https://guaguagua.icu/smartHome/api/setmessage', //仅为示例，并非真实接口地址。
					method: 'POST',
					
					data: {
						key:switchKey,
						light:data
					},
					dataType:'json',
					
					success: (res) => {
						console.log(res.data);
						console.log(res.data.current_mode);
						
						uni.showModal({
							title: '提示',
							content: res.data.current_mode,
							confirmColor: '#ffc081', //确定字体颜色
							showCancel: false,//没有取消按钮的弹框
							buttonText: '确定',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} ,
					
					fail(res) {
						console.log("失败了");
						console.log(res);
					}
				}); 
			},
			
			sandMotorWork(key, data) {
				var switchKey = 0;
				if (key) {
					switchKey = 1;
				} else {
					switchKey = 0;
				}
				console.log("发送post")
			
				uni.request({
					url: 'https://guaguagua.icu/smartHome/api/setmessage', //仅为示例，并非真实接口地址。
					method: 'POST',
					
					data: {
						key:switchKey,
						motor:data
					},
					dataType:'json',
					
					success: (res) => {
						console.log(res);
						uni.showModal({
							title: '提示',
							content: res.data.current_mode,
							confirmColor: '#ffc081', //确定字体颜色
							showCancel: false,//没有取消按钮的弹框
							buttonText: '确定',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} ,
					
					fail(res) {
						console.log("失败了");
						console.log(res);
					}
				}); 
			},
		}
	}
</script>

<style>
	.type1 {
		font-size: 20px; 
		margin-left:3%;
	}
	
	.type2 {
		font-size: 20px;
		color: #656565;
		margin-left:3%;
	}
	
	.type3 {
		display: flex;
		justify-content: center; /* 水平居中 */
		height: 80px;
	}
	
	.type4 {
		font-size: 15px;
		color: #656565;
		margin-top: 40px;
		margin-left: 5%;
	}
	
	.type5 {
		border-radius: 15px;  /* 统一圆角 */
		background: #ffffff;  /* 背景色或边框 */
		width: 92%; 
		height: 92px;
		margin-top: 1%;
		margin-left: 0%;	
	}
	
	.type6 {
		display: flex;
		font-size: 35px;
		border-radius: 15px;  /* 统一圆角 */
		width: 50px; 
		height: 50px;
		justify-content: center; /* 水平居中 */
		color: #eaeaea;
		background-color: #ffc081;
		margin-top: 20px;
		margin-left: 20px;
	}
	
	.type7 {
		font-size: 17px; 
		margin-left: 85px;
		margin-top: -45px;
	}
	
	.type8 {
		font-size: 15px; 
		margin-left: 85px;
		margin-top: 0px;
		color: #969696;
	}
	
	.type9 {
		font-size: 210%;
		margin-left: 70%;
		margin-top: -12%;
		color: #000000;
	}
	
	.type10 {
		font-size: 120%;
		margin-left: 82%;
		margin-top: -9%;
		color: #969696;
	}
	
	.type11 {
		margin-left: 80%;
		margin-top: -50px;
	}
	
	.type12{
		margin-top: 40px;
	}
	
	.style13 {
		font-size: 210%;
		margin-top: 40px;
		margin-left: 20%;
	}
	
	.style14 {
		margin-top: 20px;
		margin-left: 20%;
	}
	
	.style15 {
		font-size: 210%;
		margin-top: -85px;
		margin-left: 70%;
	}
	
	.style16 {
		margin-top: 20px;
		margin-left: 70%;
	}
</style>
